<template>
  <s-layout title="订单详情">
    <view
      style="
        width: 90%;
        height: 1000rpx;
        background-color: #fff;
        margin: 40rpx auto;
        position: relative;
        border-radius: 10rpx;
      "
    >
      <view
        style="
          width: 60rpx;
          height: 60rpx;
          border-radius: 50%;
          background-color: #f6f6f6;
          position: absolute;
          left: 50%;
          transform: translateX(-30rpx);
          top: -40rpx;
        "
      ></view>
      <view
        style="
          width: 60rpx;
          height: 60rpx;
          border-radius: 50%;
          background-color: #f6f6f6;
          position: absolute;
          left: -40rpx;
          top: 325rpx;
        "
      ></view>
      <view
        style="
          width: 60rpx;
          height: 60rpx;
          border-radius: 50%;
          background-color: #f6f6f6;
          position: absolute;
          right: -40rpx;
          top: 325rpx;
        "
      ></view>
      <view style="padding: 40rpx; border-bottom: 10rpx dashed #ccc">
        <view style="display: flex; justify-content: space-between">
          <view
            style="
              font-weight: 500;
              color: #ccc;
              display: flex;
              flex-direction: column;
              justify-content: space-between;
            "
          >
            <p style="color: black; font-weight: 700; font-size: 50rpx">
              {{ order_info.movieOrder.backParams.filmName || "电影名称" }}
            </p>
            <p>
              {{ order_info.movieOrder.backParams.cinemaName || "影院名称" }}
            </p>
            <p>
              {{ order_info.movieOrder.backParams.showName || "影厅名称" }}
            </p>
            <p>{{ formatTime(order_info.movieOrder.createTime) }}</p>
            <p>
              <text
                v-for="(value, index) in order_info.movieOrder.backParams.seats"
                :key="index"
                >{{ value.seatName }},</text
              >
            </p>
            <p>{{ order_info.movieOrder.orderPrice }}元</p>
          </view>
          <view>
            <img
              class="movie_info_pic"
              :src="order_info.movieOrder.backParams.filmPic"
          /></view>
        </view>
      </view>
      <view style="margin-top: 60rpx; display: flex; justify-content: center">
        <qrcode width="300" height="300" unit="rpx" :data="url"
      /></view>
      <view
        v-for="(item, index) in order_info.movie.tickets"
        :key="index"
        style="
          border: 4rpx solid #f6f6f6;
          width: 80%;
          height: 150rpx;
          line-height: 70rpx;
          margin: 40rpx auto;
          border-radius: 20rpx;
          color: gray;
        "
      >
        <view style="text-align: center">取票码:{{ item.ticketCode }}</view>
        <view style="text-align: center">验证码:{{ item.validateCode }}</view>
      </view>
      <view @click="showMask" style="text-align: center; color: gray"
        >点击查看</view
      >
    </view>
    <!--  -->
    <!-- 全屏蒙版 -->
    <full-screen-mask :is-visible="isMaskVisible" @close="hideMask">
      <view>
        <img :src="img" alt="" />
        <!-- <text>这是蒙版内容</text> -->
      </view>
    </full-screen-mask>
  </s-layout>
</template>

<script>
import sheep from "@/sheep";
import qrcode from "./ikun-qrcode/components/ikun-qrcode/ikun-qrcode.vue";
import FullScreenMask from "./components/fullScreenMask.vue";
export default {
  components: {
    qrcode, // 声明组件
    FullScreenMask,
  },
  data() {
    return {
      order_info: {},
      qrCodeUrl: "",
      url: "",
      img: "",
      isMaskVisible: false, // 控制蒙版的显示和隐藏
    };
  },
  filters: {
    status(int) {
      switch (int) {
        case 0:
          return "待支付";
        case 1:
          return "待出票";
        case 2:
          return "已出票";
        case 3:
          return "出票失败";
        case 4:
          return "已完成";
        case 5:
          return "售后";
        default:
          return "已完结";
      }
    },
  },
  onLoad(opt) {
    console.log(opt);
    this.getOrderInfo(opt.orderNumber);
  },
  methods: {
    showMask() {
      this.isMaskVisible = true;
    },
    hideMask() {
      this.isMaskVisible = false;
    },
    formatTime(isoString) {
      const match = isoString.match(
        /^(\d{4})-(\d{2})-(\d{2})T(\d{2}):(\d{2}):(\d{2})/
      );
      if (!match) return "Invalid format";

      const [_, year, month, day, hours, minutes, seconds] = match;
      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
    },
    async getOrderInfo(orderNumber) {
      const res = await sheep.$api.movie.getMovieDetail({
        orderNumber: orderNumber,
      });
      if (res.code === 200) {
        this.order_info = res.data;
        this.order_info.movieOrder.backParams = JSON.parse(
          res.data.movieOrder.backParams
        );
        let textUrl = null;
        // 检查 movie.tickets 是否存在且有数据
        if (res.data.movie.tickets.length > 0) {
          const ticket = res.data.movie.tickets[0];
          if (ticket.ticketCode) {
            if (ticket.validateCode) {
              textUrl = `${ticket.ticketCode}|${ticket.validateCode}`;
            } else {
              textUrl = `${ticket.ticketCode}`;
            }
          }
        }
        // 更新 url
        this.url = textUrl;
        this.img = res.data.movie.tickets[0].ticket;
        console.log(this.order_info.movieOrder.backParams);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
page {
  background: #3b4144;
}

.movie {
  margin: 0 auto;
  border-radius: 13rpx;
  padding: 30rpx;
  margin-top: 49rpx;
  width: 630rpx;
  height: 666rpx;
  background: #fff;
  position: relative;
  background: radial-gradient(circle at left bottom, transparent 22rpx, #fff 0)
      top left / 346rpx 350rpx no-repeat,
    radial-gradient(circle at right bottom, transparent 22rpx, #fff 0) top right /
      346rpx 350rpx no-repeat,
    radial-gradient(circle at left top, transparent 22rpx, #fff 0) bottom left /
      346rpx 375rpx no-repeat,
    radial-gradient(circle at right top, transparent 22rpx, #fff 0) bottom right /
      346rpx 375rpx no-repeat;

  &_status {
    position: absolute;
    z-index: 9;
    width: 150rpx;
    height: 150rpx;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1rpx dashed red;
    transform: rotate(-8deg);
    -ms-transform: rotate(-8deg);
    /* IE 9 */
    -moz-transform: rotate(-8deg);
    /* Firefox */
    -webkit-transform: rotate(-8deg);
    /* Safari 和 Chrome */
    -o-transform: rotate(-8deg);

    /* Opera */
    &_bor {
      width: 138rpx;
      height: 138rpx;
      border-radius: 50%;
      border: 1rpx dashed red;
      display: flex;
      align-items: center;
      justify-content: center;
      color: red;
      font-size: $uni-font-size-base;
    }
  }

  &_del {
    position: absolute;
    width: 81rpx;
    height: 81rpx;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  &_info {
    height: 266rpx;
    display: flex;
    flex-direction: row;

    &_pic {
      border-radius: 13rpx;
      width: 186rpx;
      height: 266rpx;
    }

    &_text {
      width: 410rpx;
      margin-left: 25rpx;
      padding: 8rpx 0;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      font-size: $uni-font-size-base;
      color: #fff;

      &_name {
        color: #000000;
        font-size: $uni-font-size-lg;
        font-weight: 900;
      }

      &_type {
        color: #000000;
        font-weight: 300;
        font-size: $uni-font-size-base;
      }

      &_time {
        font-weight: 300;
        color: #000000;
      }

      &_address,
      &_room {
        font-weight: 300;
        color: #000000;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
        overflow: hidden;
      }
    }
  }

  &_line {
    position: absolute;
    top: 350rpx;
    left: 0;
    right: 0;
    height: 6rpx;
    margin: auto;
    width: 643rpx;
    // background: linear-gradient(to right, $template-line, $template-line 16rpx, transparent 16rpx, transparent);
    background-size: 10px 100%;
  }

  &_notice {
    background: #fff;
    width: 100%;
    position: absolute;
    left: 0;
    padding-bottom: 33rpx;
    border-radius: 0 0 13rpx 13rpx;
    margin-top: 100rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    &_img {
      width: 266rpx;
      height: 266rpx;
    }
  }
}

.movieClose {
  margin: 0 auto;
  border-radius: 13rpx;
  padding: 30rpx;
  margin-top: 49rpx;
  width: 630rpx;
  height: 450rpx;
  background: #fff;
  position: relative;
  // background: radial-gradient(circle at left bottom, transparent 22rpx, #fff 0) top left / 346rpx 350rpx no-repeat,
  // 	radial-gradient(circle at right bottom, transparent 22rpx, #fff 0) top right / 346rpx 350rpx no-repeat,
  // 	radial-gradient(circle at left top, transparent 22rpx, #fff 0) bottom left / 346rpx 375rpx no-repeat,
  // 	radial-gradient(circle at right top, transparent 22rpx, #fff 0) bottom right / 346rpx 375rpx no-repeat;
}
</style>
